<template>
  <form>
    <h3 class="text-muted my-5">添加新的煲仔饭</h3>
    <div class="form-group row">
      <lable class="col-sm-1">品种</lable>
      <div class="col-sm-11">
        <input type="text" class="form-control" v-model="newBz.name" />
      </div>
    </div>
    <div class="form-group row">
      <lable class="col-sm-1">描述</lable>
      <div class="col-sm-11">
        <textarea rows="5" class="form-control" v-model="newBz.description"></textarea>
      </div>
    </div>
    <p>
      <strong>选项1</strong>
    </p>
    <div class="form-group row">
      <lable class="col-sm-1">尺寸</lable>
      <div class="col-sm-11">
        <input type="text" class="form-control" v-model="newBz.size1" />
      </div>
    </div>
    <div class="form-group row">
      <lable class="col-sm-1">价格</lable>
      <div class="col-sm-11">
        <input type="text" class="form-control" v-model="newBz.proce1" />
      </div>
    </div>
    <p>
      <strong>选项2</strong>
    </p>
    <div class="form-group row">
      <lable class="col-sm-1">尺寸</lable>
      <div class="col-sm-11">
        <input type="text" class="form-control" v-model="newBz.size2" />
      </div>
    </div>
    <div class="form-group row">
      <lable class="col-sm-1">价格</lable>
      <div class="col-sm-11">
        <input type="text" class="form-control" v-model="newBz.proce2" />
      </div>
    </div>
    <div class="form-group row">
      <button @click="addMenuItem" type="button" class="btn btn-success btn-block">添加</button>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      newBz: {}
    };
  },
  methods: {
    addMenuItem() {
      let data = {
        name: this.newBz.name,
        description: this.newBz.description,
        options: [
          {
            size: this.newBz.size1,
            price: this.newBz.price1
          },
          {
            size: this.newBz.size2,
            price: this.newBz.price2
          }
        ]
      };
      //fetch请求数据
      fetch("https://pizza-10aa1.firebaseio.com/menu.json", {
        method: "POST",
        headers: {
          "Content-type": "application/json"
        },
        body: JSON.stringify(data)
      })
        .then(res => res.json())
        .then(data => this.$store.commit("pushToMenuItems", data));
    }
  }
};
</script>

<style  scoped>
</style>
